<!--
  This file is part of Moeditor.

  Copyright (c) 2016 Menci <huanghaorui301@gmail.com>

  Moeditor is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  Moeditor is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with Moeditor. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <base href="../href.html">
        <title>Moeditor Settings</title>

		<script>
		window.$ = window.jQuery = require("jquery");
        window.document.querySelector('html').classList.add(process.platform);
        window.app = require('electron').remote.app;
        window.moeApp = app.moeApp;
        window.w = require('electron').remote.getCurrentWindow();
        const fs = require('fs');
        const path = require('path');
        </script>

        <link rel="stylesheet" href="moe-scrollbar.css">
        <script type="text/javascript" src="moe-localize.js"></script>

        <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">

        <link rel="stylesheet" href="settings/moe-settings.css">
        <script type="text/javascript" src="settings/moe-settings.js"></script>

        <link rel="stylesheet" href="fonts/moe-fonts.css">
        <link rel="stylesheet" href="settings/moe-tabview.css">
        <script type="text/javascript" src="settings/moe-tabview.js"></script>
    </head>
    <body>
        <div id="electron-titlebar" class="drag inset"></div>
        <div id="main">
            <div class="tabview">
                <div class="bar">
                    <div class="item selected" data-tab="general">
                        <div class="image"><i class="fa fa-cog" aria-hidden="true"></i></div>
                        <div class="text l10n">General</div>
                    </div>
                    <div class="item" data-tab="edit">
                        <div class="image"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
                        <div class="text l10n">Edit</div>
                    </div>
                    <div class="item" data-tab="appearance">
                        <div class="image"><i class="fa fa-paint-brush" aria-hidden="true"></i></div>
                        <div class="text l10n">Appearance</div>
                    </div>
                    <div class="item" data-tab="render">
                        <div class="image"><i class="fa fa-magic" aria-hidden="true"></i></div>
                        <div class="text l10n">Render</div>
                    </div>
                </div>
                <div class="content">
                    <div class="panel" data-tab="general" style="display: block; ">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">Language</td>
                                <td width="60%">
                                    <select class="settings-item dont-notify" data-key="locale">
                                        <option value="default" class="l10n">System Default</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Reload when file changed</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="auto-reload">
                                        <option value="auto" class="l10n">Auto</option>
                                        <option value="prompt" class="l10n">Prompt</option>
                                        <option value="never" class="l10n">Never</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Auto save</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="auto-save">
                                        <option value="disabled" class="l10n">Disabled</option>
                                        <option value="on-blur" class="l10n">On Blur</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="edit">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">Font</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="editor-font">
                                        <option value="default" class="l10n">Default</option>
                                        <option value="monospace">Monospace</option>
                                        <option value="serif">Serif</option>
                                        <option value="sans">Sans</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Font Size</td>
                                <td width="60%">
                                    <input class="settings-item" type="text" data-key="editor-font-size" value="14">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Line Height</td>
                                <td width="60%">
                                    <input class="settings-item" type="text" data-key="editor-line-height" value="2">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Tab Size</td>
                                <td width="60%">
                                    <input class="settings-item" type="text" data-key="tab-size" value="4">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="appearance">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">Color Theme</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="editor-theme">
                                        <option value="base16-light">Base16 Light</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="render">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">TeX Math Expressions</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="math">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">UML Diagrams</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="uml-diagrams">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Breaks</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="breaks">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Highlight Theme</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="highlight-theme">
                                        <script>
                                        fs.readdirSync(path.resolve(path.dirname(path.dirname(require.resolve('highlight.js'))), 'styles'))
                                          .filter(s => s.endsWith('.css'))
                                          .map(s => s.substr(0, s.length - 4))
                                          .forEach(s => {
                                               document.write(`<option value="${s}">${s}</option>`)
                                          });
                                        </script>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Render Theme</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="render-theme" style="width: calc(100% - 49px); ">
                                        <script>
                                        fs.readdirSync(`${app.getAppPath()}/themes`)
                                          .forEach(s => {
                                               document.write(`<option value="${s}" class="builtin">${s}</option>`);
                                          });

                                        const custom = moeApp.config.get('custom-render-themes');
                                        for (const s in custom) {
                                            document.write(`<option value="${s}">${s}</option>`);
                                        }
                                        </script>
                                    </select>
                                    <button class="button-add-remove button-add" style="border-right: none; margin-left: -5px; "><i class="fa fa-plus" aria-hidden="true"></i></button>
                                    <button class="button-add-remove button-remove" style="margin-left: -4px; "><i class="fa fa-minus" aria-hidden="true"></i></button>
                                </td>
                            </tr>
                            <tr style="height: 75px; ">
                                <td width="40%" class="l10n">Custom CSSs</td>
                                <td width="60%">
                                    <select class="settings-item" multiple size="5" id="custom-csss" style="height: 50px; width: calc(100% - 25px); font-size: 11px; ">
                                        <script>
                                        const a = moeApp.config.get('custom-csss');
                                        for (const s in a) {
                                            document.write(`<option value="${s}"${a[s].selected ? ' selected' : ''}>${s}</option>`);
                                        }
                                        </script>
                                    </select>
                                    <div style="display: inline-block; margin-left: -1px; position: absolute; ">
                                        <button class="button-add-remove button-add" style="border-bottom: none; "><i class="fa fa-plus" aria-hidden="true"></i></button>
                                        <br>
                                        <button class="button-add-remove button-remove"><i class="fa fa-minus" aria-hidden="true"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
